<template>
    <main class="py-16">
        <div class="container-custom">
            <h1 class="mb-12 text-4xl font-bold text-center">我们的产品</h1>

            <transition-group
                name="product-list"
                tag="div"
                class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
                <div
                    v-for="product in products"
                    :key="product.id"
                    class="overflow-hidden transition-shadow duration-300 bg-white rounded-lg shadow-lg hover:shadow-xl">
                    <img :src="product.image" :alt="product.name" class="w-full h-48" />
                    <div class="p-6">
                        <h3 class="mb-2 text-xl font-semibold">{{ product.name }}</h3>
                        <p class="mb-4 text-gray-600">{{ product.description }}</p>
                        <button
                            class="px-6 py-2 text-white transition-colors rounded-full bg-primary hover:bg-opacity-90"
                            @click="gotoProductDetail(product)">
                            了解详情
                        </button>
                    </div>
                </div>
            </transition-group>
        </div>
    </main>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Logo from "../assets/home_logo.jpeg";
import noImg from "../assets/111.jpg";
interface Product {
    id: number;
    name: string;
    description: string;
    image: string;
    path: string;
}

const products = ref<Product[]>([
    {
        id: 1,
        name: "小易秒报",
        description: "Sass+数据+Ai人工智能快速报价系统",
        image: Logo,
        path: "https://quote.1pei.me/",
    },
    {
        id: 2,
        name: "目录平台",
        description: "一站式渠道销售系统，实现商机转化、企业赋能",
        image: noImg,
        path: "",
    },
]);

const gotoProductDetail = (product: Product) => {
    if (product.path) {
        window.open(product.path, "_blank");
    } else {
        alert("系统研发中,敬请期待");
    }
};
</script>

<style scoped>
.product-list-enter-active,
.product-list-leave-active {
    transition: all 0.5s ease;
}

.product-list-enter-from,
.product-list-leave-to {
    opacity: 0;
    transform: translateY(30px);
}
</style>
